<template>
    <div>
        <el-card class="box-card">
            <div class="text item">
                <div style="margin-bottom: 30px">
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <el-col :span="4">
                                    <div class="grid-content bg-purple">
                                        <el-select v-model="condition.type" multiple placeholder="房间类型">
                                            <el-option
                                                    v-for="item in roomTypes"
                                                    :key="item.typeId"
                                                    :label="item.typeName"
                                                    :value="item.typeId">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple">
                                        <el-select v-model="condition.state" multiple placeholder="房间状态">
                                            <el-option
                                                    v-for="item in roomStarts"
                                                    :key="item.stateId"
                                                    :label="item.stateName"
                                                    :value="item.stateId">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-light">
                                        <el-select v-model="condition.floor" multiple placeholder="楼层">
                                            <el-option
                                                    v-for="item in floors"
                                                    :key="item.floorId"
                                                    :label="item.floorName"
                                                    :value="item.floorId">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple">
                                        <el-input
                                                placeholder="请输入要检索的房间号"
                                                v-model="condition.roomName"
                                                clearable>
                                        </el-input>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-light">
                                        <el-button type="primary" @click="select()">查询</el-button>
                                        <el-button type="primary" @click="empty()">置空</el-button>
                                    </div>
                                </el-col>
                                <el-col :span="2">
                                    <div class="grid-content bg-purple-light">
                                        <el-button type="primary" @click="changeState()">变更房态</el-button>
                                    </div>
                                </el-col>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-table
                        :data="datas"
                        border
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        height="500" id="showData">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="主卧">
                                    <span>{{ props.row.roomPhoto.phtotMaster}}</span>
                                </el-form-item>
                                <el-form-item label="客卧">
                                    <span>{{ props.row.roomPhoto.phtotGuest}}</span>
                                </el-form-item>
                                <el-form-item label="卫生间">
                                    <span>{{ props.row.roomPhoto.phtotToilet}}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="房间号"
                            prop="roomNum">
                    </el-table-column>
                    <el-table-column
                            label="所属楼层"
                            prop="floor.floorName">
                    </el-table-column>
                    <el-table-column
                            label="房间类型"
                            prop="roomType.typeName">
                    </el-table-column>

                    <el-table-column
                            prop="roomState.stateName"
                            label="房间状态"
                            width="100"
                            :filters="item"
                            :filter-method="filterTag"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="items[scope.row.roomState.stateId].type"
                                    disable-transitions>{{scope.row.roomState.stateName}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="房间备注"
                            prop="roomType.roomComm">
                    </el-table-column>
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="pagesize_s"
                        @current-change="page"
                        background
                        :current-page="condition.currPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="20"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="count"
                >
                </el-pagination>
            </div>
        </el-card>

        <el-dialog title="变更房态" :visible.sync="dialogFormVisible">
            <el-select v-model="changeStateId" placeholder="请选择要变更的房间状态">
                <el-option v-for="item in roomStarts" :label="item.stateName" :value="item.stateId"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="chengeStartEntry()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style>
    @import "../../css/RoomAll.css";
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<script>
    export default {
        data() {
            return {
                /*查询条件*/
                condition: {
                    currPage: 1,
                    pageSize: 20,
                    type: [],
                    state: [],
                    floor: [],
                    roomName:''
                },
                changeStateId:'',
                dialogFormVisible: false,
                /*数据*/
                datas:[],
                /*总条数*/
                count: 1,

                /*房间类型*/
                roomTypes: [],
                /*房间状态*/
                roomStarts:[],
                /*楼层数*/
                floors:[],
                item:[
                    { text: '空闲', value: '1' },
                    {text: '公司', value: '公司' }
                    ],
                items: [
                    { type: '', value:'0'},
                    { type: '', value:'1'},
                    { type: 'success',value:'2'},
                    { type: 'info',value:'3'},
                    { type: 'danger',value:'4'},
                    { type: 'warning',value:'5' }
                ],
                multipleSelection: []
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = [];
                val.forEach(v=>{
                    this.multipleSelection.push(v.roomId)
                })
            },
            chengeStartEntry(){
                if(this.changeStateId == null || this.changeStateId == ''){
                    this.$message({
                        message: '没有选择要变更房态的房间状态',
                        type: 'warning'
                    });
                    return;
                }
                let _this = this;
                this.$axios.post('room/batch/state/'+this.changeStateId,this.multipleSelection)
                    .then(function (response) {
                        console.log(response)
                        _this.datas = [];
                        _this.datas = response.data.data.data;
                        _this.count = '';
                        _this.count = response.data.data.count;
                        _this.$message({
                            message: '房间状态变更成功',
                            type: 'success'
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                this.dialogFormVisible = false;
            },
            changeState(){
                if(this.multipleSelection.length == 0){
                    this.$message({
                        message: '没有选择要变更房态的房间',
                        type: 'warning'
                    });
                    return;
                }
                this.dialogFormVisible = true;
            },
            empty(){
                    this.condition.type=[],
                    this.condition.state=[],
                    this.condition.floor=[],
                    this.condition.roomName=''
            },
            filterTag(value, row) {
                return row.roomState.stateId === value;
            },
            page(curr){
                this.condition.currPage =curr;
                console.log(this.condition)
                let _this = this;
                this.$axios.post('room/show',this.condition)
                    .then(function (response) {
                        _this.datas = response.data.data;
                        console.log(_this.datas);
                        _this.count = response.data.count;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                console.log(this.condition)
            },
            pagesize_s(size){
                this.condition.pageSize = size;
                let _this = this;
                this.$axios.post('room/show',this.condition)
                    .then(function (response) {
                        _this.datas = response.data.data;
                        _this.count = response.data.count;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            select(){
                //把页数清空
                this.condition.currPage = 1;
                this.refresh();
            },

            refresh(){
                let _this = this;
                this.$axios.post('room/show',this.condition)
                    .then(function (response) {
                        _this.datas = [];
                        _this.count= [];
                        _this.datas = response.data.data;
                        _this.count = response.data.count;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        },
        created(){
            let _this = this;
            /*请求房间*/
            this.$axios.post('room/show',this.condition)
                .then(function (response) {
                    _this.datas = response.data.data;
                    _this.count = response.data.count;
                })
                .catch(function (error) {
                    console.log(error);
                });
            /*请求楼层*/
            this.$axios.post('floor/showfloor',this.condition)
                .then(function (response) {
                    _this.floors = response.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
            /*请求房间类型*/
            this.$axios.post('roomtype/showtype',this.condition)
                .then(function (response) {
                    _this.roomTypes = response.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
            /*请求房间状态*/
            this.$axios.post('state/showstate',this.condition)
                .then(function (response) {
                    _this.roomStarts = response.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
</script>
